<template >
  
    <div >
      <h1  style="color: #d4e4d5;text-align: center; font-size: 36px;text-shadow: 1px 1px;">能源管理展示大屏</h1>
    <!-- 顶部 -->
    <div>
      <index-top/>
    </div> <br><br>
    <div>
      <a-row :gutter="24">
        <!-- 左侧栏 -->
        <a-col :span="6">
          <index-left/>
        </a-col>
        <a-col :span="18">
          <div>
            <a-row :gutter="24">
              <!-- 中间饼图 -->
              <a-col :span="17">
                <index-middle/>
              </a-col>
              <!-- 右侧列表 -->
              <a-col :span="7">
                <index-right/>
              </a-col>
            </a-row>
          </div> <br><br>
          <!-- 底部 -->
          <div>
            <index-bottom/>
          </div> <br><br><br><br><br><br><br>
        </a-col>
      </a-row>
    </div>
  </div>


  
</template>

<script>
  import IndexTop from './IndexTop'
  import IndexLeft from './IndexLeft'
  import IndexMiddle from './IndexMiddle'
  import IndexRight from "./IndexRight"
  import IndexBottom from './IndexBottom'

  export default {
    name: "IndexTask",
    components: {
      IndexTop,
      IndexLeft,
      IndexMiddle,
      IndexRight,
      IndexBottom,
    },
    data() {
      return {
      }
    },
    created() {

    },
    methods: {

    }
  }
</script>

<style>

.dialog h1 {
  margin-top: 0;
}
</style>